<!--
 * @Author: chenl
 * @Date: 2023-12-06 09:52:24
 * @LastEditors: chenl
 * @LastEditTime: 2024-03-13 19:52:44
 * @Description: 菜单
-->

<template>
  <div class="AMenu">
    <el-menu
      active-text-color="#409eff"
      background-color="#545c64"
      text-color="#fff"
      :default-active="this.$route.name"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      :class="{ active: isCollapse }"
    >
      <div v-for="(item, index) in menus" :key="index">
        <el-submenu :index="item.id" v-if="item.children">
          <!-- 一级 -->
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">{{ item.name }}</span>
          </template>
          <!-- 三级 -->
          <div v-if="item.children.children">
            <el-submenu
              :index="childitem.id"
              v-for="(childitem, childindex) in item.children"
              :key="childindex"
            >
              <span slot="title">{{ childitem.name }}</span>
              <el-menu-item
                v-for="(child2item, child2index) in childitem"
                :key="child2index"
                :index="child2item.id"
                @click="handmenu(child2item)"
                >{{ child2item.name }}</el-menu-item
              >
            </el-submenu>
          </div>
          <!-- 二级 -->
          <div v-else>
            <el-menu-item-group v-for="(childitem, childindex) in item.children" :key="childindex">
              <el-menu-item :index="childitem.id" @click="handmenu(childitem)">{{
                childitem.name
              }}</el-menu-item>
            </el-menu-item-group>
          </div>
        </el-submenu>
        <el-menu-item :index="item.id" v-else @click="handmenu(item)">
          <i class="el-icon-menu"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>
<script>
import { mapActions } from 'vuex';
export default {
  props: {},
  data() {
    return {
      menus: [
        // {
        //   id: "home",
        //   name: "首页",
        //   route: "home",
        // },
        {
          id: 'groundMaterials',
          name: '地材供应链管理',
          children: [
            {
              id: 'merchantManage',
              name: '供应商户管理',
              route: 'merchantManage',
            },
          ],
        },
      ],
    };
  },
  components: {},
  watch: {
    $route: {
      handler: function (val) {
        console.log('监听路由');
        // 获取当前菜单位置
        let arr = this.getParentId(this.menus, 'id', val.name);
        let menuPosition = '';
        arr.forEach((v) => {
          if (menuPosition) {
            menuPosition = '  /  ' + v.name + menuPosition;
          } else {
            menuPosition = '  /  ' + v.name;
          }
        });
        this.updateMenuPositionAsync(menuPosition);
        // 点击的路由存放处
        console.log(val);
        let menuTabs = this.$store.state.state.menuTabs;
        var index = menuTabs.findIndex((item) => item.route === val.name);
        if (index == -1) {
          //说明arr中不存在该对象
          menuTabs.push({
            route: val.name,
            name: val.meta.name,
          });
        }
        this.updateMenuTabsAsync(menuTabs);
      },
      // 深度观察监听
      deep: true,
    },
  },
  computed: {
    isCollapse() {
      return this.$store.state.state.isCollapse; // 返回$store对象的状态值
    },
  },
  created() {},
  mounted() {},
  methods: {
    ...mapActions('state', ['updateMenuPositionAsync', 'updateMenuTabsAsync']),
    handmenu(val) {
      this.$router.push('/' + val.route);
    },

    // 寻找子级父级
    getParentId(list, name, value) {
      for (let i in list) {
        if (list[i][name] == value) {
          return [list[i]];
        }
        if (list[i].children) {
          let node = this.getParentId(list[i].children, name, value);
          if (node !== undefined) {
            return node.concat(list[i]);
          }
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.AMenu {
  .el-menu {
    border: none;
  }

  .is-active > .el-submenu__title > span {
    color: #409eff;
  }

  /* icon图标也跟着变 */
  .el-submenu.is-active > .el-submenu__title i {
    color: #409eff;
  }

  .el-menu-item {
    background-color: #545c64 !important;
  }

  .el-menu-item:hover {
    background-color: rgb(67, 74, 80) !important;
  }

  .is-active {
    background-color: #303133 !important;
  }

  .active {
    i {
      margin-right: 20px;
    }
    ::v-deep .el-icon-arrow-right {
      display: none;
    }
  }
}
</style>
